<template>
  <div>
    <van-pull-refresh
      v-model="isLoading"
      @refresh="onRefresh"
      :disabled="flag"
      success-text="刷新成功"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        offset="30"
        @load="onLoad"
      >
        <ArticleItem
          v-for="obj in articleList"
          :key="obj.art_id"
          :ArticleObj="obj"
          @Cross="feedback"
          @click.native="goArticle(obj.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>

    <!-- 反馈面板 -->
    <van-action-sheet
      v-model="show"
      :actions="actions"
      :cancel-text="textflag ? '取消' : '返回'"
      get-container="body"
      @cancel="onCancel"
      @select="onSelect"
      @close="onClose('反馈')"
    />

    <!-- 点击反馈面板的二级面板上的其他问题后弹出一个输入框 -->
    <van-popup
      v-model="InputShow"
      position="bottom"
      get-container="body"
      :style="{ height: '30%' }"
      @close="onClose('输入')"
    >
      <van-field
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        maxlength="50"
        placeholder="请输入问题内容"
        show-word-limit
        clearable
      />
      <van-button type="primary" @click="submitFn" :disabled="message === ''"
        >提交</van-button
      >
      <van-button type="info" @click="back">返回</van-button>
    </van-popup>
  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
import { getAllArticle, NotLike, ReportArticle } from '@/api/article/index.js'
import { firstOptions, secondOptions } from '@/api/article/options.js'
export default {
  props: ['id'],
  data() {
    return {
      timestamp: +new Date(), // 时间戳 用于获取文章列表
      articleList: [], // 文章列表
      loading: false, // 上拉加载更多数据的状态
      finished: false, // 上拉加载 是否加载完毕
      isLoading: false, // 下拉加载更多数据的状态
      flag: false, // 是否禁用下拉加载
      show: false, // 是否展示反馈面板
      actions: firstOptions, // 面板选项
      textflag: true, // 为true则是一级面板 false则是二级面板
      InputShow: false, // 是否展示其他问题输入框的弹出层
      ArticleId: 0, // 文章id
      ArticleType: '', // 文章举报类型
      message: '', // 其它问题的内容
    }
  },
  created() {
    this.getArticle('上拉')
  },
  methods: {
    // 获取文章列表
    async getArticle(str) {
      const { data: res } = await getAllArticle({
        channel_id: this.id,
        timestamp: this.timestamp,
      })
      if (res.message !== 'OK') {
        return this.$notify({ type: 'danger', message: '获取数据失败' })
      }
      // console.log(res)
      if (str === '上拉') {
        this.articleList = [...this.articleList, ...res.data.results]
        this.loading = false
      } else {
        this.articleList = [...res.data.results, ...this.articleList]
        this.isLoading = false
      }
      this.timestamp = res.data.pre_timestamp
      if (!res.data.pre_timestamp) {
        this.finished = true
        this.flag = true
      }
    },
    // 上拉加载更多
    onLoad() {
      // immediate-check:内部不进行判断，但监听滚动事件的代码还在
      // 第一个频道滚动到底部 然后点进第二个判断 会直接从底部滚动到顶部
      // 这个时候发生了滚动 所以滚动事件依旧触发 immediate-check判断无效了
      if (this.articleList.length > 0) {
        this.getArticle('上拉')
      } else {
        this.loading = false
      }
    },
    // 下拉加载更多
    onRefresh() {
      if (this.articleList.length > 0) {
        this.getArticle('下拉')
      } else {
        this.flag = true
      }
    },
    // 点击文章列表上的x 按钮
    feedback(id) {
      // console.log(id)
      this.ArticleId = id
      this.show = true
    },
    // 点击面板的取消按钮
    onCancel() {
      if (!this.textflag) {
        // 当点的是二级面板的取消按钮 则需要返回到一级面板
        this.show = true
        this.actions = firstOptions
        this.textflag = true
      }
    },
    // 面板选择了哪个
    onSelect(action, index) {
      // console.log(action)
      if (action.name === '反馈垃圾内容') {
        this.actions = secondOptions
        this.textflag = false
      } else if (action.name === '不感兴趣') {
        this.dontlike()
      } else if (action.name === '其它问题') {
        this.show = false
        this.InputShow = true
        this.ArticleType = action.value
      } else {
        this.ArticleType = action.value
        this.submitFn()
      }
    },
    // 面板关闭
    onClose(str) {
      if (str === '反馈') {
        // 需要返回到一级面板的选项
        // console.log(str)
        this.actions = firstOptions
        this.textflag = true
      } else {
        // 把点击其它问题后弹出的输入框里面的内容清空
        // console.log(str)
        this.message = ''
      }
    },
    // 点击其它问题后弹出的输入框里面的提交按钮
    async submitFn() {
      const { data: res } = await ReportArticle({
        target: this.ArticleId,
        type: this.ArticleType,
        remark: this.message,
      })
      if (res.message !== 'OK') {
        return this.$notify({ type: 'danger', message: res.message })
      }
      this.show = false
      this.InputShow = false
      this.$notify({ type: 'success', message: '反馈成功' })
    },
    // 点击其它问题后弹出的输入框里面的返回按钮 返回到反馈面板的二级面板
    back() {
      this.InputShow = false
      this.textflag = false
      this.actions = secondOptions
      this.show = true
    },
    // 点击一级面板的不感兴趣
    async dontlike() {
      const { data: res } = await NotLike(this.ArticleId)
      if (res.message !== 'OK') {
        return this.$notify({ type: 'danger', message: res.message })
      }
      // console.log(res)
      this.$notify({ type: 'success', message: '操作成功' })
      this.articleList = this.articleList.filter(
        (x) => x.art_id !== this.ArticleId
      )
      this.show = false
    },
    // 去文章详情页
    goArticle(id) {
      this.$router.push({
        path: '/article_detail',
        query: { articleId: id },
      })
    },
  },
  components: {
    ArticleItem,
  },
}
</script>

<style lang="less" scoped>
/deep/ .van-button {
  margin: 15px 20px;
}
</style>
